<template>
  <div>
    <Search />
    <ShopHeader :shopInfo="shopinfos.shops" @focus="focus"></ShopHeader>
    <div class="goods-container">
      <div class="goods-list">
        <div
          class="goods-show-info"
          v-for="(item, index) in shopGoodsList.data"
          :key="index"
          @click="goDetail(item)"
        >
          <div class="goods-show-img">
            <img :src="item.thumb_url" />
          </div>
          <div class="goods-show-price">
            <span>
              <Icon type="social-yen text-danger"></Icon>
              <span class="seckill-price text-danger">{{ item.currency_symbol }}{{ item.zs_price }}</span>
            </span>
          </div>
          <div class="goods-show-detail">
            <span>{{ item.goods_name }}</span>
          </div>
        </div>
      </div>
      <div class="goods-page">
        <!-- <Page :total="shopGoodsList.total" show-sizer></Page> -->
        <Page :total="shopGoodsList.total" :page-size="shopGoodsList.per_page" @on-change="pageChange"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import ShopHeader from "@/components/header/ShopHeader";
import store from "@/vuex/store";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "Merchant",
  data(){
    return {
      shopinfos:{},
      shopGoodsList:[],
      shop_id:0,
      shcate_id:0,
      page:1,
    }
  },
  created() {
    const { query: { shop_id, shcate_id } } = this.$route
    this.shop_id = shop_id
    this.shcate_id = shcate_id

    this.getShopperDetail()
    this.getallgoods();
  },
  computed: {},
  methods: {
    ...mapActions(["loadGoodsList"]),
    goDetail(item){
      this.$router.push({path:'/goodsDetail',query:{goodsId:item.id}})
    },
    getShopperDetail(){
      let params = {shop_id:this.shop_id}
      this.$http.getShopperDetail(params).then(res=>{
        const {status,data} = res
        if(status===200){
          this.shopinfos = data
        }
      })
    },
    
    getallgoods() {
      let params = { shop_id:this.shop_id, page: this.page, sort: "zonghe",shcate_id:this.shcate_id }
      this.$http.getallgoods(params).then(res=>{
        const {status,data} = res
        if(status===200){
          this.shopGoodsList = data
        }
      })
    },

    pageChange(page){
      this.page = page;
      this.getallgoods();
    },

    focus(coll_shops){
      console.log("关注店铺")
      console.log(coll_shops)
      if(coll_shops==0){
        this.$http.getshopcoll({shop_id:this.shop_id}).then(res=>{
          if(res.status===200){
            this.getShopperDetail()
            this.$Message.success(res.mess)
          }
        })
      }else{
        this.$http.getshopcancelcoll({shop_id:this.shop_id}).then(res=>{
          if(res.status===200){
            this.getShopperDetail()
            this.$Message.success(res.mess)
          }
        })
      }
    },

  },
  components: {
    ShopHeader,
  },
  store,
};
</script>

<style scoped>
.text-danger {
  color: #a94442;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.goods-container {
  margin: 15px auto;
  width: 1190px;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
}
.goods-show-info {
  width:23%;
  padding: 10px;
  margin: 15px 10px 20px 0;
  cursor: pointer;
  background-color: #fff;
}
.goods-show-info:hover {
  border: 1px solid #e7e3e7;
  box-shadow: 0px 0px 15px #e7e3e7;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}
.goods-show-seller {
  font-size: 12px;
  color: #e4393c;
}
.goods-page {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
